<template>
  <div class="hzs-label-id">
    <div class="hzs-el-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/label' }">标签</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: $route.path, query: {name: $route.query.name} }">
          {{ $route.query.name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>标签动态</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="label-tab">
      <el-tabs value="question" type="card" @tab-click="handleClick">
        <el-tab-pane label="技术问答" name="question">
          <question-list name="question" :page="page" :listData="questionList" @fetch-data="fetchData"/>
        </el-tab-pane>
        <el-tab-pane label="博客文章" name="article">
          <article-list name="article" :page="page" :listData="articleList" @fetch-data="fetchData"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import QuestionList from '@/components/question/List'
import ArticleList from '@/components/article/List'

export default {
  components: {QuestionList, ArticleList},

  // 校验标签id
  validate({params}) {
    return /^\d+$/.test(params.id)
  },

  data() {
    return {
      articleList: [] // 文章列表数据
    }
  },

  methods: {
    handleClick(tab) {
      // 切换标签页查询对应第1页的数据
      this.fetchData(tab.paneName, 1)
    },

    // 切换页码时查询（标签页的名字，当前页码）
    async fetchData(paneName, current) {
      this.page.current = current
      // 请求接口响应的对象
      let response = null
      switch (paneName) {
        case 'question':
          // 查询技术问答列表
          response = await this.$getQuestionByLableId(this.page, this.$route.params.id)
          // 将新数据重新赋值
          this.page.total = response.data.total
          this.questionList = response.data.records
          break;
        case 'article':
          // 封装标签id,和分页对象{current: 1, size: 20, total: 0, labelId: 10}
          const query = {...this.page, labelId: this.$route.params.id}
          response = await this.$getArticleList(query)
          this.page.total = response.data.total
          this.articleList = response.data.records
          break;
        default:
          break;
      }

    }
  },

  async asyncData({params, app}) {
    // 首次加载页面，查询技术问答列表
    const page = { // 分页对象
      current: 1,
      size: 20,
      total: 0
    }
    // 查询
    const {data} = await app.$getQuestionByLableId(page, params.id)
    page.total = data.total

    return {page, questionList: data.records}
  },
}
</script>

<style>
.hzs-label-id .label-tab {
  margin-bottom: 100px;
  padding: 50px 20px 30px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  box-shadow: 0 0 20px black;
  margin-top: 30px;
}

.hzs-el-breadcrumb {
  box-shadow: 0 0 10px black;
  padding: 20px;
  background-color: white;
}

.hzs-el-breadcrumb:hover {
  box-shadow: 0 0 30px black;
}

</style>
